<template>
	<view :class="[primarySize()]">
		<view class="page-foot" v-if="userinfo.group_id==2">
			<Footer :identity="2" :footState="0" :num="megNum"></Footer>
		</view>
		<view class="page-foot" v-else>
			<Footer :identity="1" :footState="0" :num="megNum"></Footer>
		</view>
		<view class="container">
			<hx-navbar ref="hxnb" :config="config">
				<view class="pl30 flex-box" slot="max">
					<image v-if="logo" :src="logo" mode="aspectFill" class="logo"></image>
					<view class="fwb fs36 colf pl10">{{platform_name}}</view>
				</view>
			</hx-navbar>
			<swiper class="bg_img" circular :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(banner,index) in banners" @click="bindBannerJump(banner.minapp_url)">
					<image :src="cdnurl(banner.image)" mode="aspectFill" class="bg_img"></image>
				</swiper-item>
			</swiper>
			<view class="pt30"></view>
			<view class="pr z2  plr30 pb30">
				<view class="flex-box search_nav">
					<!-- 城市切换 -->
					<view class="flex-box" @click="jumpLoacte">
						<image :src="iconPath('icon_address.png')" mode="widthFix" class="ico25"></image>
						<view class="address_nav fwb fs24 col2 m-ellipsis">
							{{currentCity?currentCity.name:''}}
						</view>
					</view>
					<image src="@/static/public/arrow_down.png" mode="widthFix" class="ico17"></image>



					<input type="text" placeholder="请输入职位或公司" :disabled="true" @click="bindSearch"
						class="inp_nav flex-grow-1" placeholder-class="colnor" />
					<image src="@/static/public/icon_search.png" mode="aspectFill" class="ico28" @click="search">
					</image>
				</view>
				<view class="zhaopin">
					<navigator url="/pages/enterprise/hire_list">
						<image src="@/static/public/zhaopin.png" mode=""></image>
					</navigator>
					<navigator url="/pages/enterprise/live_hire_list">
						<image src="@/static/public/zhibo.png" mode=""></image>
					</navigator>
				</view>
				<!-- 金刚区 -->
				<view class="clearfix col6 fs24 pt20">
					<template>
						<view class="quick_link1" v-for="(item,index) in navigation" @click="onNavigation(item)">
							<image :src="item.icon_image_text" mode="aspectFill" class="quick_icon"></image>
							<view class="mt15">{{item.name}}</view>
						</view>
					</template>
				</view>
				<view>
					<view class="notice_con flex-box">
						<view class="notice_line"></view>
						<navigator url="/pages/user/policy_list" hover-class="none" class="notice_tit">
							<text>招聘</text>公告
						</navigator>
						<swiper circular indicator-color='#E1E1E1' @change="swiperTextchange" autoplay vertical
							class="flex-grow-1 swiper_text" interval="5000" :duration="500">
							<swiper-item v-for="(item,index) in newsBanners">
								<navigator hover-class="none" url="/pages/user/policy_list">{{item.title}}
								</navigator>
							</swiper-item>
						</swiper>
						<view class="swiper_text_cir">
							<view v-for="(item,index) in newsBanners" :class="[text_current==index?'active':'']">
							</view>
						</view>
					</view>
				</view>

				<!-- 名企推荐 -->
				<view class="pt15">
					<navigator url="/pages/user/business_list" hover-class="none" class="business_tit flex-box">
						<view class="flex-grow-1">名企推荐</view>
						<image src="@/static/public/arrow-r.png" mode="aspectFit" class="arrow-r"></image>
					</navigator>
					<view class="business_main">
						<business-list :business-list="companies"></business-list>
					</view>
				</view>

				<!-- 列表 -->
				<view class="pt15" v-if="!userinfo || userinfo.group_id == 1">
					<view class="filtrate_wrap">
						<view class="flex-box flex-align-start">
							<view class="filtrate_scroll " style="flex: 1;">
								<view class="business_tit filtrate_tab" :class="[tabIndex==index?'active':'']"
									@click="bindTabChange(index)" v-for="(item,index) in tab" :key="index">{{item}}
								</view>
							</view>
						</view>
					</view>
					<job-list :jobs="jobs"></job-list>
					<template v-if="tabIndex!=0">
						<view class="nothing" v-if="jobsMore.nothing">
							<image src="@/static/public/icon_nothing.png" mode="aspectFit"></image>
							<text>暂无职位</text>
						</view>
						<view class="g-btn3-wrap" v-else>
							<view class="g-btn3" @click="fetchJob()">{{jobsMore.text}}</view>
						</view>
					</template>
				</view>
				<!-- 列表 -->
				<view class="pt15" v-if="userinfo.group_id == 2">
					<view class="filtrate_wrap">
						<view class="flex-box flex-align-start">
							<view class="filtrate_scroll " style="flex: 1;">
								<view class="business_tit filtrate_tab active">人才推荐</view>
							</view>
						</view>
					</view>
					<resume-list :resumes="resumes"></resume-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jobList from '../../components/job-list/job-list.vue';
	import resumeList from '../../components/resume-list/resume-list.vue';
	import businessList from '../../components/business-list/business-list.vue';
	const app = getApp();
	export default {
		components: {
			jobList,
			resumeList,
			businessList
		},
		data() {
			return {
				config: {
					color: '#101010',
					back: false,
					maxSlot: true,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, 'var(--primary)'],
					slideBackgroundColor: [1, 'var(--primary)'],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				configo: {
					color: '#ffffff',
					back: false,
					title: '首页',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#FFFFFF', '#FFFFFF']],
					slideBackgroundColor: [1, ['#ff7100', '#ff7100']],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				megNum: 0,
				logo: '',
				platform_name: '',
				currentCity: null,
				banners: [],
				navigation: [],
				newsBanners: [],
				userinfo: null,
				companies: [],
				resumes: [],
				resumesMore: {
					text: '加载中',
					page: 1
				},
				tab: ['推荐', '附近'],
				tabIndex: 0,
				statusBarHeight: null,
				barHeight: null,
				query: {
					pos: '',
					lat: '',
					lng: ''
				},
				jobs: [],
				jobsMore: {
					page: 1
				}
			}
		},
		onLoad() {
			let page = this;

			page.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			// #ifdef MP
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// #endif
			page.barHeight = 44 + page.statusBarHeight;
			this.$core.getLatLng({
				success: ret => {
					this.query.lat = ret.latitude;
					this.query.lng = ret.longitude;
					this.query.pos = ret.longitude + ',' + ret.latitude
					this.refreshPage();
				},
				fail: ret => {
					uni.showToast({
						title: '定位失败',
						icon: 'none'
					})
					this.refreshPage();
				}
			})
			if (this.$core.getUserinfo()) {
				this.userinfo = this.$core.getUserinfo();
			}
			this.eventOnConfigChange(app.globalData.config)
			this.currentCity = this.$core.getCurrentCity();
			uni.$on(app.globalData.Events.ConfigChange, this.eventOnConfigChange);
			uni.$on(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange);
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
			uni.$on(app.globalData.Events.UserLogout, this.eventOnUserLogout, this);
			uni.$on(app.globalData.Events.UserinfoUpdate, this.eventOnUserinfoUpdate, this);

			//未读消息
			if (app.globalData.chat_config.SocketTask) {
				this.$chatIM.setMessageBadge(false)
			}
			uni.$on(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount, this);

		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			// this.$refs.hxnb.pageScroll(e);
		},
		onUnload() {
			uni.$off(app.globalData.Events.ConfigChange, this.eventOnConfigChange);
			uni.$off(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange);
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin);
			uni.$off(app.globalData.Events.UserLogout, this.eventOnUserLogout);
			uni.$off(app.globalData.Events.UserinfoUpdate, this.eventOnUserinfoUpdate, this);
			uni.$off(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);

		},
		onReachBottom() {
			let userinfo = this.userinfo;
			if (userinfo && userinfo.group_id != 1) {
				this.fetchResume();
			} else {
				if (this.tabIndex != 0) {
					this.fetchJob();
				}
			}
		},
		onPullDownRefresh() {
			this.refreshPage();
		},
		onShareAppMessage(e) {

		},
		onShareTimeline() {

		},
		methods: {
			bindTabChange(e) {
				this.tabIndex = e;
				this.refresh()
			},
			jumpLoacte() {
				uni.navigateTo({
					url: '/pages/public/locate'
				})
			},
			bindBannerJump(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			eventOnConfigChange(config) {
				this.logo = config.logo;
				this.platform_name = config.platform_name
			},

			bindSearch() {
				uni.navigateTo({
					url: '/pages/public/search_result'
				})
			},
			//刷新
			refreshPage() {
				let page = this;
				let userinfo = this.userinfo;
				this.jobs = [];
				this.jobsMore = {
					page: 1
				};
				this.resumes = [];
				this.resumesMore = {
					text: '加载中',
					page: 1
				};
				this.fetchBanners();
				this.fetchNavigation();
				this.fetchCompany();
				this.fetchNews();
				if (userinfo && userinfo.group_id != 1) {
					this.fetchResume();
				} else {
					this.tabIndex == 0 ? this.fetchJobRecommend() : this.fetchJob();
				}
				uni.stopPullDownRefresh();
			},
			fetchBanners() {
				let groupId = this.userinfo && this.userinfo.group_id != 1 ? 2 : 1;
				this.$core.get({
					url: 'xilujob.banner/banners/group/index',
					data: {
						group_id: groupId
					},
					loading: false,
					success: ret => {
						this.banners = ret.data;
					}
				});
			},
			fetchNavigation() {
				let groupId = this.userinfo?.group_id ? this.userinfo.group_id : 1;
				this.$core.get({
					url: 'xilujob.common/navigation',
					data: {
						group: groupId
					},
					loading: false,
					success: ret => {
						this.navigation = ret.data;
					}
				});
			},
			fetchCompany() {
				this.$core.get({
					url: 'xilujob.company/lists',
					loading: false,
					success: ret => {
						this.companies = ret.data.data.slice(0, 3);
					}
				});
			},
			fetchNews() {
				this.$core.get({
					url: '/xilujob.news/announcement?pagesize=1',
					loading: false,
					success: ret => {
						this.newsBanners = ret.data.data
					}
				});
			},
			//金刚区
			onNavigation(item) {
				console.log(item);
				if (item.type == 1) {
					if (item.jump_type == 1) {
						uni.navigateTo({
							url: item.url
						})
					} else {
						let query = item.url.split('?');
						if (query.length > 1) {
							let param = query[1].split("=");
							this.$core.setCache(param[0], param[1], 2);
						}
						uni.switchTab({
							url: query[0]
						})
					}
				} else if (item.type == 2) {
					uni.navigateTo({
						url: './web?url=' + item.url
					})
				} else if (item.type == 3) {
					uni.navigateToMiniProgram({
						appId: item.mini_appid,
						path: item.url
					})
				}
			},
			refresh(clearQuery = false) {
				console.log('刷新了');
				let userinfo = this.$core.getUserinfo();
				if (clearQuery) {
					this.query.category_id = 0;
					this.query.salary_type = '';
					this.query.salary_option_id = '';
					this.query.salary_option_id = '';
					this.query.salary_min = '';
					this.query.salary_max = '';
					this.query.work_experience_id = '';
					this.query.education_level_id = '';
					this.query.benefit_id = [];
					this.filterTab1SubIndex = 0;
					this.filterTab2SubIndex = -1;
					this.filterTab3SubIndex = 0;
				}
				this.fetchBanners();
				this.fetchNavigation();
				this.fetchCompany();
				this.fetchNews();
				if (userinfo && userinfo.group_id != 1) {
					this.resumes = [];
					this.resumesMore = {
						page: 1
					};
					this.fetchResume();
				} else {
					this.jobs = [];
					this.jobsMore = {
						page: 1
					};
					this.tabIndex == 0 ? this.fetchJobRecommend() : this.fetchJob();
				}
			},

			fetchJobRecommend() {
				this.$core.get({
					url: 'xilujob.job/recommend_jobs',
					loading: false,
					success: ret => {
						this.jobs = ret.data.jobs;
					}
				});
			},
			fetchJob() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.job/lists', query, 'jobsMore', 'jobs', 'data', data => {

				})
			},
			fetchResume() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.resume/lists', query, 'resumesMore', 'resumes', 'data', data => {

				})
			},
			chooseNav(index) {
				this.nindex = index;
				if (index == 1) {
					//获取定位
					this.query.sort = 'distance';
					this.$core.getLatLng({
						success: res => {
							this.query.pos = res.longitude + ',' + res.latitude;
							this.refresh(true)
						},
						fail: ret => {
							this.refresh(true)
						}
					})
				} else {
					this.query.sort = '';
					this.refresh(true)
				}
			},
			eventOnCurrentCityChange: function(currentCity) {
				this.currentCity = currentCity;
				this.refreshPage();
			},
			eventOnUserLogin(userinfo) {
				console.log('shouyejianting');
				this.userinfo = userinfo;
				this.refresh();
			},
			eventOnUserLogout() {
				this.userinfo = null;
				this.refresh();
			},

			//未读消息
			eventWebsocketMessageCount(data) {
				this.megNum = this.userinfo ? app.globalData.chat_config.messageCount : 0;
				// this.$forceUpdate()
			},
			eventOnUserinfoUpdate(userinfo) {
				this.userinfo = userinfo;
				this.refresh();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.primary_orange .container {
		width: 100%;
		font-family: 'PingFang SC', 'Microsoft Yahei';
		line-height: 1.4;
		font-size: 28rpx;
		color: var(--black);
		background-color: var(--white);
		overflow: hidden;
		min-height: 100vh;
		position: relative;
	}

	.logo {
		width: 56rpx;
		height: 56rpx;

	}

	.bg {
		&_img {
			width: 100%;
			display: block;
			height: 340rpx;
			z-index: 1;
		}
	}

	.pt424 {
		padding-top: 424rpx;
	}

	.search {
		&_nav {
			width: 690rpx;
			height: 86rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.3);
			border-radius: 43rpx;
			margin-left: auto;
			margin-right: auto;
			padding: 0 30rpx;

			.address_nav {
				max-width: 112rpx;
				padding-left: 20rpx;
				padding-right: 15rpx;
			}

			.inp_nav {
				position: relative;
				margin-left: 30rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: var(--normalBlack);
				position: relative;
			}

			.inp_nav:before {
				content: '';
				width: 1px;
				height: 34rpx;
				background: #ECECEC;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}

	}

	.quick {
		&_link {
			width: 20%;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			line-height: 33rpx;
			margin-top: 25rpx;
		}

		&_link1 {
			width: 25%;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			line-height: 33rpx;
			margin-top: 25rpx;
		}

		&_icon {
			width: 90rpx;
			height: 90rpx;
		}
	}

	.news {
		&_box {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 18rpx;
			padding: 35rpx 30rpx 30rpx;
		}

		&_recomd_link {
			margin-top: 35rpx;

			.cover {
				width: 188rpx;
				height: 131rpx;
				border-radius: 10rpx;
			}

			.title {
				height: 82rpx;
				line-height: 41rpx;
			}

			.sub_title {
				margin-top: 30rpx;
				padding-top: 30rpx;
				border-top: 1px solid #D8D8D8;
			}
		}
	}

	.ico22 {
		width: 22rpx;
		height: 22rpx;
	}

	.tab {
		&_nav {
			height: 58rpx;
		}

		&_nav.fixed {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 10077;
			background: #fff;
			height: 88rpx;
		}

		&_item {
			height: 58rpx;
			position: relative;
			line-height: 48rpx;
			font-size: 34rpx;
			color: #666666;
			display: inline-block;
			vertical-align: top;
			margin-right: 48rpx;

			&.active {
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
			}

			&.active::after {
				content: '';
				width: 28rpx;
				height: 6rpx;
				background: var(--primary);
				border-radius: 26rpx;
				display: block;
				position: relative;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}


	.popup {
		background: #fff;

		.pop_tab_nav {
			height: 85rpx;
			padding: 0 45rpx;
		}

		.pop_scroll {
			height: 630rpx;
			padding: 0 0 0 45rpx;
			position: relative;

			&.i {
				padding: 0;
			}

			.pop_left {
				width: 200rpx;
				height: 100%;
				float: left;
				background: #fff;
			}

			.pop_left .item {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-right: 20rpx;
				padding-left: 40rpx;
				color: #333333;
				position: relative;
				font-size: 28rpx;
			}

			.pop_left .item.active {
				color: var(--primary);
			}

			.pop_left .item.active::after {
				content: '';
				position: absolute;
				z-index: 1;
				width: 5rpx;
				height: 80rpx;
				display: block;
				left: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				background: var(--primary);
				border-radius: 5rpx;
			}

			.pop_right {
				float: left;
				width: 550rpx;
				height: 100%;
				background: #F6F8FE;
			}

			.scroll_item {
				border: 1px solid #F5EEEE;
				width: 152rpx;
				height: 65rpx;
				line-height: calc(65rpx - 2px);
				text-align: center;
				color: #666666;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
				margin-top: 20rpx;
				padding: 0 10rpx;
				display: inline-block;
				vertical-align: top;

				&.active {
					border: 1px solid var(--primary);
					color: var(--primary);
				}
			}
		}

		.pop_bottom {
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			padding-left: 45rpx;
			padding-right: 30rpx;

			.bt1 {
				width: 152rpx;
				height: 74rpx;
				background: rgba(0, 103, 211, .1);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: var(--primary);
				line-height: 74rpx;
				text-align: center;
			}

			.bt2 {
				margin-left: 35rpx;
				width: 486rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background: var(--primary);
				border-radius: 8rpx;
			}
		}

		.city_item {

			font-size: 26rpx;
			color: #333333;
			line-height: 100rpx;

			&.active {
				font-weight: bold;
				color: var(--primary);
			}
		}
	}

	.page-head {
		z-index: 99999;
	}

	.ico13 {
		width: 13rpx;
		height: 8rpx;
	}

	/* 公告 */
	.notice_line {
		width: 6rpx;
		height: 31rpx;
		background-color: var(--primary);
		border-radius: 6rpx;
	}

	.notice_tit {
		color: #000000;
		font-size: 34rpx;
		font-weight: bold;
		padding: 0 27rpx 0 22rpx;
		border-right: 1rpx solid #F4F4F4
	}

	.notice_tit text {
		color: var(--primary);
	}

	.notice_con {
		border-radius: 4rpx;
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.06);
		border: 1rpx solid #EBEBEB;
		padding: 0 26rpx;
		background: #fff;
		margin-top: 30rpx;
	}

	.swiper_text {
		height: 90rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 90rpx;
	}

	.swiper_text swiper-item {
		padding: 0 20rpx
	}

	.swiper_text_cir view {
		background-color: #E1E1E1;
		width: 8rpx;
		height: 8rpx;
		display: block;
		border-radius: 50%;
		margin: 4rpx
	}

	.swiper_text_cir view.active {
		background-color: var(--primary)
	}

	/* 名企推荐 */
	.business_tit {
		font-size: 34rpx;
		color: #000;
		font-weight: bold;
		padding: 30rpx 0;
	}

	.area_main {
		white-space: nowrap;
		padding-bottom: 20rpx;
	}

	.area_item {
		width: 494rpx;
		height: 244rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-right: 21rpx;
	}

	.area_item:nth-child(1) {
		margin-left: 30rpx;
	}

	.area_item:nth-last-child(1) {
		margin-right: 30rpx;
	}

	.area_item>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block
	}

	.area_item:nth-child(2n+1) .area_color {
		background-color: #6D4638;
		opacity: 0.95;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block
	}

	.area_item:nth-child(2n+1) .area_info {
		position: relative;
		z-index: 20;
		color: #fff;
		padding: 42rpx 35rpx 35rpx;
	}

	.area_item:nth-child(2n+1) .area_tit {
		font-size: 38rpx;
		font-weight: bold
	}

	.area_item:nth-child(2n+1) .area_text {
		font-size: 24rpx;
		padding: 10rpx 0 20rpx;
	}

	.area_item:nth-child(2n+1) .look_btn {
		background-color: #fff;
		width: 135rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 4rpx;
		color: #6d4638;
		font-size: 24rpx;
		text-align: center
	}

	.area_item:nth-child(2n) .area_color {
		background-color: #5B5C73;
		opacity: 0.95;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block
	}

	.area_item:nth-child(2n) .area_info {
		position: relative;
		z-index: 20;
		color: #fff;
		padding: 42rpx 35rpx 35rpx;
	}

	.area_item:nth-child(2n) .area_tit {
		font-size: 38rpx;
		font-weight: bold
	}

	.area_item:nth-child(2n) .area_text {
		font-size: 24rpx;
		padding: 10rpx 0 20rpx;
	}

	.area_item:nth-child(2n) .look_btn {
		background-color: #fff;
		width: 135rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 4rpx;
		color: #6d4638;
		font-size: 24rpx;
		text-align: center
	}

	.backTop {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		border-radius: 50%;
		background-color: #ff7100;
		z-index: 100;
		bottom: 250rpx;
		right: 30rpx;
	}

	.backTop image {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 25rpx;
	}

	/*  */
	.filtrate_wrap {}

	.filtrate_scroll {
		overflow-x: scroll;
		white-space: nowrap;
	}

	.filtrate_scroll::-webkit-scrollbar {
		display: none;
	}

	.filtrate_wrap .filtrate_tab {
		display: inline-block;
		font-size: 32rpx;
		color: #000;
		line-height: 42rpx;
		font-weight: normal;
		padding-bottom: 20rpx;
	}

	.filtrate_wrap .filtrate_tab+.filtrate_tab {
		margin-left: 56rpx;
	}

	.filtrate_wrap .filtrate_tab.active {
		position: relative;
		font-weight: 700;
		color: #333333;
		font-size: 34rpx;
	}

	.filtrate_wrap .filtrate_tab.active::after {
		content: '';
		position: absolute;
		bottom: 5rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 28rpx;
		height: 6rpx;
		background: var(--primary);
		border-radius: 26rpx;
	}

	.filtrate_wrap .icon1 {
		margin-left: 30rpx;
		display: block;
		width: 40rpx;
		height: 40rpx;
	}

	.filtrate_wrap .fujin {
		padding: 0 0 20rpx;
		border-bottom: 1px solid #EEEEEE;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.filtrate_wrap .fujin .icon2 {
		margin-right: 10rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.filtrate_wrap .btn_dis {
		width: 112rpx;
		height: 52rpx;
		background: #F9F9F9;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 52rpx;
		text-align: center;
	}

	.filtrate_wrap .distance {
		padding: 20rpx 0;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.filtrate_wrap .distance .item {
		padding: 0 36rpx;
		margin-right: 20rpx;
		display: inline-block;
		height: 50rpx;
		background: #F9F9F9;
		border-radius: 3rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
	}

	.filtrate_wrap .distance .item.active {
		background: #FFF;
		border: 1px solid var(--primary);
		height: 46rpx;
		line-height: 46rpx;
		color: var(--primary);
	}

	.zhaopin {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		image {
			width: 329rpx;
			height: 139rpx;
		}
	}
</style>